/*
 * @Author: funlee 
 * @Email: i@funlee.cn 
 * @Date: 2017-12-13 10:22:17 
 * @Last Modified time:   2017-12-13 10:22:17 
 * @Description: 演示静态地图 
 */
import ol from 'openlayers'
import 'openlayers/dist/ol.css'
import bgMap from '../../img/kmmap.png'
import panda from '../../img/pandaBase.jpg'
import flag from '../../img/flag_right.png'

export default () => {
  // 地图设置中心，设置到成都，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
  var center = [104.06667, 30.66667]//ol.proj.transform(, 'EPSG:4326', 'EPSG:3857');
  // 计算熊猫基地地图映射到地图上的范围，图片像素为 1061*344，保持比例的情况下，把分辨率放大一些    1061*1526
  var extent = [center[0] - 1061 * 1000 / 2, center[1] - 1526 * 1000 / 2, center[0] + 1061 * 1000 / 2, center[1] + 1526 * 1000 / 2];

  //创建地图
  var map = new ol.Map({
    view: new ol.View({
      center: center,
      zoom: 7
    }),
    target: 'map'
  });

  // 加载熊猫基地静态地图层
  map.addLayer(new ol.layer.Image({
    source: new ol.source.ImageStatic({
      url: bgMap, // 熊猫基地地图
      imageExtent: extent     // 映射到地图的范围
    })
  }));


  // document.querySelector('.btn').addEventListener('click',function() {
    // 创建一个用于放置活动图标的layer
    var activityLayer = new ol.layer.Vector({
      source: new ol.source.Vector()
    });
    // 创建一个活动图标需要的Feature，并设置位置
    var activity = new ol.Feature({
      geometry: new ol.geom.Point([center[0] - 1061 * 1000 / 2 + 390 * 1000, center[1] - 1526 * 1000 / 2 + (1526 - 145) * 1000])
    })
    // 设置Feature的样式，使用小旗子图标
    activity.setStyle(new ol.style.Style({
      image: new ol.style.Icon({
        src: flag,
        anchor: [0, 1],
        scale: 0.2
      })
    }));
  // })
}